<template>
    <div class="mall-container">
        <div class="mall_item animate__animated animate__fadeInUp">
            <div class="content">
                <div class="bg">
                    <img
                        :src="require('@/assets/images/mall_right_bg01.png')"
                    />
                </div>
                <div class="title">云采</div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
            <div class="pop_content">
                <YuncaiPurchase
                    :mallUrl="require('@/assets/images/mall_img01.png')"
                    title="云采"
                    desc="品类齐全，质量严选。打造建筑类一站式自主选购超大平台，采购一手好货！"
                />
            </div>
        </div>
        <div class="mall_item animate__animated animate__fadeInDown">
            <div class="content">
                <div class="bg">
                    <img
                        :src="require('@/assets/images/mall_right_bg02.png')"
                    />
                </div>
                <div class="title">机械云</div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
            <div class="pop_content">
                <YuncaiPurchase
                    :mallUrl="require('@/assets/images/mall_img02.png')"
                    title="机械云"
                    desc="急租即用。工程器械共享，绿色城市从我做起。"
                />
            </div>
        </div>
        <div class="mall_item animate__animated animate__fadeInUp">
            <div class="content">
                <div class="bg">
                    <img
                        :src="require('@/assets/images/mall_right_bg03.png')"
                    />
                </div>
                <div class="title">闲置云</div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
            <div class="pop_content">
                <YuncaiPurchase
                    :mallUrl="require('@/assets/images/mall_img03.png')"
                    title="闲置云"
                    desc="闲置为零，置换无价。大厂闲置转售，资源优化再分配。"
                />
            </div>
        </div>
        <div class="mall_item animate__animated animate__fadeInDown">
            <div class="content">
                <div class="bg">
                    <img
                        :src="require('@/assets/images/mall_right_bg04.png')"
                    />
                </div>
                <div class="title">好物推荐</div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
            <div class="pop_content">
                <YuncaiPurchase
                    :mallUrl="require('@/assets/images/mall_img04.png')"
                    title="好物推荐"
                    desc="猜你需要，推你喜欢。"
                />
            </div>
        </div>
        <div class="mall_item animate__animated animate__fadeInUp">
            <div class="content">
                <div class="bg">
                    <img
                        :src="require('@/assets/images/mall_right_bg05.png')"
                    />
                </div>
                <div class="title">服务云</div>
                <div class="btn"><i class="el-icon-right"></i></div>
            </div>
            <div class="pop_content">
                <YuncaiPurchase
                    :mallUrl="require('@/assets/images/mall_img05.png')"
                    title="服务云"
                    desc="设计、监理、咨询，做你的工程好帮手，你想要的我都有！"
                />
            </div>
        </div>
    </div>
</template>

<script>
import YuncaiPurchase from "@/components/YuncaiPurchase";
export default {
    name: "Mall",
    components: {
        YuncaiPurchase,
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/mixin.less";
.mall-container {
    color: #ffffff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    .mall_item {
        width: 20%;
        position: relative;
        transition: 0.4s;

        .content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(to bottom, #fcfdfd, #4ea6fd);
            overflow: hidden;
            position: relative;
            &::before {
                content: "";
                position: absolute;
                z-index: 99;
                right: 0;
                top: 0;
                background-image: linear-gradient(to bottom, #e0dfe0, #0080ff);
                width: 1px;
                height: 100%;
            }
            .bg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                object-fit: scale-down;
                z-index: 1;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .title {
                color: #222222;
                font-size: 28px;
                margin-bottom: 80px;
                z-index: 2;
            }
            .btn {
                .hollow-btn();
                padding: 0 30px;
                z-index: 2;
            }
        }
        .pop_content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        &:hover {
            width: 400px;
            .content {
                display: none;
                transition: 0.4s;
            }
            .pop_content {
                display: block;
                transition: 0.4s;
            }
        }
        // &.one {
        //     &::after {
        //         content: "";
        //         position: absolute;
        //         z-index: 99;
        //         left: 0;
        //         top: 0;
        //         background-image: radial-gradient(
        //             circle,
        //             closest-side,
        //             #ffffff,
        //             #f1f1f1dd,
        //             #ffffffaa
        //         );
        //         width: 100%;
        //         height: 100%;
        //     }
        // }
    }
}
</style>